<template>
  <div id="nav">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="0">
        <img
          style="width: 130px"
          src="../assets/cloudInn_logo.png"
          alt="云客栈"
        />
      </el-menu-item>
      <el-menu-item index="1">文章</el-menu-item>
      <el-menu-item index="2">问答</el-menu-item>
      <el-menu-item index="3">关注</el-menu-item>
      <div class="flex-grow" />

      <div class="search">
        <el-input
          v-model="search"
          class="w-50 m-2 content"
          size="large"
          placeholder="搜索"
          suffix-icon="Search"
          @change="searchArticles"
        />
      </div>

      <template v-if="userStore.user.userId">
        <el-menu-item index="4"
          ><el-icon><BellFilled /></el-icon
        ></el-menu-item>

        <el-sub-menu index="5">
          <template #title
            ><img style="width: 30px" :src="avatar" alt="云客栈"
          /></template>
          <el-menu-item index="5-1" @click="toUserSpace">个人主页</el-menu-item>
          <el-menu-item index="5-2" @click="exit">登出</el-menu-item>
        </el-sub-menu>
      </template>
      <template v-else>
        <el-menu-item @click="login" index="6">登录</el-menu-item>

        <el-menu-item @click="register" index="7">注册</el-menu-item>
      </template>
    </el-menu>
  </div>

  <!-- 注册组件 -->
  <Register ref="registerRef"></Register>
  <!-- 登录组件 -->
  <Login ref="loginRef"></Login>
</template>
  
<script>
export default {
  data() {
    return {
      activeIndex: 1,
      search: "",
      avatar: "",
    };
  },
  mounted() {},
  methods: {
    searchArticles() {
      let routeUrl = this.$router.resolve({
        path: "/search",
        query: { keyword: this.search },
      });
      window.open(routeUrl.href, "_blank");
      this.search = "";
    },
    handleSelect(key, keyPath) {
      // key: string, keyPath: string[]
      console.log(key, keyPath);

      if (key === "1") {
        this.$router.push({ path: "/" });
      } else if (key === "2") {
        this.$router.push({ path: "/faq" });
      } else if (key === "3") {
        this.$router.push({ path: "/" });
      }
    },
  },
};
</script>

  <script setup>
// 导入设置token信息的方法
import { $setToken } from "../utils/request";
// 导入组件
import Register from "../components/Register.vue";
import Login from "../components/Login.vue";
// 导入组合式api
import { ref, onMounted, computed, watch, watchEffect } from "vue";
import { useRouter, useRoute } from "vue-router";
// 导入全局状态存储库
import { useUser } from "../store";
const userStore = useUser();

// 创建路由器
let router = useRouter();
// 获取当前路由
let route = useRoute();
// 定义一个ref用于绑定注册组件
let registerRef = ref(null);
// 打开注册界面的方法
let register = () => {
  // 打开注册界面
  registerRef.value.showRegister = true;
};
// 定义一个ref用于绑定登录组件
let loginRef = ref(null);
// 打开登录界面的方法
let login = () => {
  loginRef.value.showLogin = true;
};

let avatar = ref(null);
onMounted(() => {
  // 如果浏览器缓存中是否有user信息
  if (sessionStorage.getItem("user")) {
    userStore.setUser(JSON.parse(sessionStorage.getItem("user")));
    avatar.value = userStore.$state.user.avatar;
  }
  // 判断浏览器缓存中单是否有token信息
  if (sessionStorage.getItem("token")) {
    console.log("存在token信息");
    $setToken(sessionStorage.getItem("token"));
  }
});

let toUserSpace = () => {
  router.push({ path: "/user" });
};

// 退出方法
let exit = () => {
  console.log("登出");
  // 清空浏览器缓存
  localStorage.clear();
  sessionStorage.clear();
  // 清空token
  $setToken("");
  // 重置登录用户信息
  userStore.reset();

  router.push({ path: "/" });
};
</script>
<style lang="less" scoped>
.flex-grow {
  flex-grow: 1;
}
.search {
  width: 250px;
  position: relative;
  margin-right: 25px;

  .content {
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%); /* 水平居中，垂直居中*/
    transform: translate(-50%, -50%); /* 水平居中，垂直居中*/
  }
}
</style>
  